<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="问答配置">
      <router-link :to="{ path: '/article/addprsduct',query: { id: tableData.data[0].id } }">
          <el-button size="small" icon="el-icon-plus" type="primary"
          style="margin-bottom: 20px;"
            >新增</el-button
          >
        </router-link>
      <el-table
        :data="tableData.data"
        v-loading="listLoading"
        border
        size="mini"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="50"
        ></el-table-column>
        <el-table-column label="等级" align="center">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" disable-transitions>
              {{ scope.row.level + 1 }}级
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属流程" prop="dictQstnCate">
        </el-table-column>
        <el-table-column align="center" label="上级问题" prop="parentName">
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" label="问题名称" prop="questionName">
        </el-table-column>
        <el-table-column align="center" label="答案类型">
          <template slot-scope="scope">
            {{ scope.row.type | typeFilter }}
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="答案内容">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">{{ scope.row.content }}</span>
            <span v-else-if="scope.row.type == 2">
              <el-image
                :preview-src-list="[scope.row.linkUrl]"
                :src="scope.row.linkUrl"
                style="width: 50px; height: 50px"
              ></el-image>
            </span>
            <span v-else-if="scope.row.type == 3" @click="seeVideo(scope.row)">
              <video
                :src="scope.row.linkUrl"
                style="width: 50px; height: 50px"
              />
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enableStatus"
              :active-value="1"
              :inactive-value="0"
              @change="editQuestion({
                id: scope.row.id,
                enableStatus: scope.row.enableStatus
              })"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="排序" prop="sort">
          <template slot-scope="scope">
            <el-input-number
              @change="stortParams({
                id: scope.row.id,
                sort: scope.row.sort,
              })"
              style="width: 100%;"
              size="mini"
              v-model="scope.row.sort"
              :min="0"
              :max="100"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime">
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <router-link
            v-if="scope.row.enableStatus == 0"
              :to="{ path: '/article/addAnswer', query: { id: scope.row.id } }"
            >
              <el-button type="text" v-if="scope.row.enableStatus == 0" size="mini">编辑</el-button>
              
            </router-link>

            <el-button type="text" size="mini" @click="deleteAnswer(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </el-dialog>

    <el-dialog
      title="预览视频"
      :visible.sync="dialogVideoVisible"
      width="400px"
      @close="handleCancel"
    >
      <div style="text-align: center; margin: 0 auto" v-if="detailInfo.linkUrl">
        <video
          ref="vueRef"
          height="600px"
          :src="detailInfo.linkUrl" 
          controls
        ></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getQuestionList, deleteAnswer, updateAnswer,answerenableStatus } from "@/api/IntelligentService";
import { getDictLabel } from "@/utils/dict";
export default {
  filters: {
    typeFilter(val) {
      if (val == 1) {
        return "文本";
      } else if (val == 2) {
        return "图片";
      } else if (val == 3) {
        return "视频";
      } else if (val == 4) {
        return "客服消息";
      }
    },
  },
  props: {
    productQstnCate: {
      type: Array,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogVideoVisible: false,
      searchForm: {
        productId: "",
        pageNum: 1,
        pageSize: 10,
      },
      listLoading: false,
      tableData: {
        data: [],
        total: 0,
      },
      detailInfo: {},
    };
  },
  methods: {
    editQuestion(params) {
      console.log("params", params)
      answerenableStatus(params).then(res=> {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      })
    },
    stortParams(params) {
      console.log("params", params)
      updateAnswer(params).then(res=> {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
      })
    },
    handleCancel() {
      this.dialogVideoVisible = false;
      this.$refs.vueRef.pause(); //暂停
    },
    seeVideo(v) {
      this.dialogVideoVisible = true;
      this.detailInfo = v;
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    openLog(v) {
      console.log("v", v);
      this.searchForm.productId = v.productId;
      this.dialogVisible = true;
      this.getList();
    },
    deleteAnswer(v) {
      this.$confirm("此操作将永久删除?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteAnswer(v.id).then((res) => {
          this.$message.success("删除成功");
          this.getList();
        });
      });
    },
    getList() {
      this.listLoading = true;

      getQuestionList(this.searchForm)
        .then((res) => {
          this.listLoading = false;
          res.data.list.forEach((item) => {
            item.dictQstnCate = getDictLabel(
              item.dictQstnCate,
              this.productQstnCate
            );
          });
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
        })
        .finally((v) => {
          this.listLoading = false;
        });
    },
    closeLog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style></style>
